import 'package:flutter/material.dart';

void main() {
  runApp(
      MyApp()
  );
}

/**
 * Widget
 * 有状态的Widget：statefulWigdget 在运行过程中有一些状态（data）需要gaibian
 * 无状态Widget：statelessWidget 内容是确定没有状态（data）的改变
 */
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: Homebar(), body: Contextbody());
  }
}

class Homebar extends AppBar {
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Center(
        child: Text(
          "拆分代码",
          textDirection: TextDirection.ltr,
          style: TextStyle(fontSize: 30, color: Colors.yellow),
        ),
      ),
    );
  }
}

class Homecontext extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        "拆分代码",
        textDirection: TextDirection.ltr,
        style: TextStyle(fontSize: 40, color: Colors.blue),
      ),
    );
  }
}

class Homebody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "第一个Text",
          textDirection: TextDirection.ltr,
          style: TextStyle(color: Colors.red),
        ),
        Checkbox(
          value: true,
          onChanged: (value) {
            print(value);
          },
        )
      ],
    ));
  }
}

//flag 状态
//Stateful不能定义状态 创建一个单独的类，这个类负责维护状态
class Contextbody extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return contextbodyState();
  }
}

class contextbodyState extends State<Contextbody> {
  var flage = true;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "data",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.red),
          ),
          Checkbox(
              value: flage,
              onChanged: (values) {
                setState(() {
                  flage = values!;
                });
              })
        ],
      ),
    );
  }
}
